<template>
    <div class="view-record">
        <template>
            <div class="tab">
                <div class="tab__item" :class='{active:index == "0"}' @click='index = 0'>
                    <p>浏览记录</p>
                    <span>{{viewTotal}}条记录</span>
                </div>
                <div class="tab__item" :class='{active:index == "1"}' @click='index = 1'>
                    <p>付费记录</p>
                    <span>{{paidTotal}}条记录</span>
                </div>
            </div>
            <div class="view-list" v-show='index == 0'>
                <div class="view-box">
                    <toggle class='view-toggle' key='view' v-for='(item,index) in viewRecords' :show='index == 0'>
                        <div class="view-date" slot='header'>
                            <p class='date'><i></i><span>{{item.date}}</span></p>
                            <div class="total"><span>共{{item.count}}条记录</span><i class='iconfont icon-arrow'></i></div>
                        </div>
                        <ul class="view-content" slot='content'>
                            <li class="view__item" v-for='item in item.list' @click='goContactDetail(item)'>
                                <img class="avatar" :src="item.user && item.user.avatar">
                                <div class="info">
                                    <p class="name">{{item.user && item.user.realName}}</p>
                                    <p class="zm">{{item.zmScore || placeholder}}</p>
                                </div>
                                <div class="money">求借<span>{{item.borrowAmount | toYuan}}元</span></div>
                                <div class="icon"><img width="24" src="../images/contact_info@3x.png"></div>
                            </li>
                        </ul>
                    </toggle>
                    <loading v-show='!viewLastPage' :size='15'></loading>
                    <div class="page-placeholder" v-if='!loading_view && !viewRecords.length'><span>暂无浏览记录</span></div>
                    <p class='no-more' v-if='viewLastPage'>以上为全部浏览记录</p>
                </div>
            </div>
            <div class="view-list" v-show='index == 1'>
                <div class="view-box">
                    <toggle key='paid' v-for='(item,index) in paidRecords' :show='index == 0'>
                        <div class="view-date" slot='header'>
                            <p class='date'><i></i><span>{{item.date}}</span></p>
                            <div class="total"><span>共{{item.count}}条记录</span><i class='iconfont icon-arrow'></i></div>
                        </div>
                        <ul class="view-content" slot='content'>
                            <li class="view__item pay" v-for='item in item.list' @click='goContactDetail(item)'>
                                <img class="avatar" :src="item.user && item.user.avatar">
                                <p class="name">{{item.user && item.user.realName}}</p>
                                <p class="zm">{{item.user && item.user.zmScore || placeholder}}</p>
                                <div class="money score">使用点券<span>{{item.score | toYuan('int')}}点</span></div>
                            </li>
                        </ul>
                    </toggle>
                    <loading v-if='!paidLastPage' :size='15'></loading>
                    <div class="page-placeholder" v-if='!loading_paid && !paidRecords.length'><span>暂无浏览记录</span></div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import toYuan from '../filters/filter-toYuan'
    import toggle from '../components/Toggle.vue'
    import loading from '../components/Loading.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { scrollLoading, scrollLoadingOff } from '../utils/utils'
    import { loanOutApi, userApi, lenderApi, loginApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            toggle,
            loading
        },
        filters:{
            toYuan,
        },
        data() {
            return {
                placeholder:'--',
                index:0,
                pageLoaded:false,
                loading_view:false,
                viewRecords:[],
                viewTotal:'',
                viewLastDateStr:'',
                viewLastPage:false,
                loading_paid:false,
                paidRecords:[],
                paidTotal:'',
                paidLastDateStr:'',
                paidLastPage:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            hasMine(){
                return !_.isEmpty(this.mine)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setHasTradePassword'
            ]),
            // function

            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            clear(){
                localStorage.clear()
            },
            goContactDetail(item){
                this.$router.push({
                    name:'contact-detail',
                    params:{
                        id:item.user.uuid
                    }
                })
            },
            logout(){
                this.showLoading()
                loginApi.logout()
                .then(result=>{
                    let sessionId = this.localInfo.sessionId
                    this.hideLoading()
                    // this.setSessionId('')
                    this.setNeedLogin(true)
                    this.$router.push({
                        name:'bind-phone'
                    })
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            goUserBindCardVerified(){
                if(this.mine.bankcard && this.mine.bankcard.cardNo ){
                    this.$router.push({
                        name:'user-bind-card-list'
                    })
                    return
                }
                this.$router.push({
                    name:'user-bind-card-verified'
                })
            },
            goUserPasswordManage(){
                this.$router.push({
                    name:'user-password-manage'
                })
            },
            goUserCreditReportIndex(){
                this.$router.push({
                    name:'user-credit-report-index',
                    params:{
                        no:'default'
                    }
                })
            },
            withDrawAll(){
                this.withDrawMoney = 600
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            getViewRecord(){
                this.loading_view = true
                loanOutApi.viewRecord({
                    dateStr:this.viewLastDateStr
                })
                .then(result=>{
                    this.loading_view = false
                    this.viewRecords = _.concat(this.viewRecords, result.recordList)
                    this.viewTotal = result.totalCount
                    this.viewLastDateStr = result.lastDateStr
                    this.viewLastPage = result.isLastPage
                })
                .catch(error => {
                    this.loading_view = false
                    console.error(error)
                })
            },
            getPaidRecord(){
                this.loading_paid = true
                loanOutApi.paidRecord()
                .then(result=>{
                    this.loading_paid = false
                    this.paidRecords = result.recordList
                    this.paidTotal = result.totalCount
                    this.paidLastDateStr = result.lastDateStr
                    this.paidLastPage = result.isLastPage
                })
                .catch(error => {
                    this.loading_paid = false
                    console.error(error)
                })
            },
        },
        created(){
            this.showLoading()
            Promise.all([this.getViewRecord(),this.getPaidRecord()])
            .then(result=> {
                this.pageLoaded = true
                this.hideLoading()
            })
            .catch(error=> {
                this.pageLoaded = true
                console.log(error);
                this.hideLoading()
            });

            this.$nextTick(()=>{
                console.log(1)
                scrollLoading('.view-list','.view-box',()=>{
                    console.log('scroll')
                    if(this.index == 0){
                        if(this.loading_view) return
                        if(this.viewLastPage) return
                        this.getViewRecord()
                    }
                    if(this.index == 1){
                        if(this.loading_paid) return
                        if(this.paidLastPage) return
                        this.getPaidRecord()
                    }
                })
            })
        },
        destroyed(){
            scrollLoadingOff('.view-box')
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .view-record{
        .view-list{
            position: absolute;
            top:72px;
            bottom: 0;
            left:0;
            right: 0;
            overflow:auto;
            .component-toggle.show{
                .total .iconfont{
                    transform:rotate(270deg);
                }
            }
        }
        .tab{
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
        }
        .tab__item{
            flex:1;
            margin:0 15px;
            padding:14px 5px 10px 5px;
            border-bottom:2px solid transparent;
            text-align: center;
            &:active,&.active{
                color:$orange;
                border-color:$orange;
                p{
                    color:$orange;
                }
            }
            p{
                @extend %font-subhead;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
        }
        .view-toggle{
            border-bottom:1px solid $sectionColor;
        }
        .view-date{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:11px 16px;
            .date{
                display: flex;
                align-items: center;
                i{
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-radius:50%;
                    background-color: $sectionColor;
                }
                span{
                    display: block;
                    @extend %font-body2;
                    padding-left: 8px;
                }
            }
            .total{
                @extend %font-caption;
                display: flex;
                align-items: center;
                span{
                    margin-right: 8px;
                }
                .iconfont{
                    display: block;
                    transform:rotate(90deg);
                }
            }
        }
        .view__item{
            display: flex;
            align-items: center;
            background-color: #fff;
            padding:10px 16px;
            position: relative;
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
                border-bottom: 1px solid $sectionColor;
            }
            &:last-child{
                &:after{
                    display: none;
                }
            }
            &.pay{
                .name{
                    padding-right: 8px;
                }
                .zm{
                    margin-top: 0;
                }
            }
            .avatar{
                width: 32px;
                height: 32px;
                border-radius:50%;
                margin-right: 16px;
            }
            .money{
                flex:1;
                padding-left: 27px;
                @extend %font-caption;
                span{
                    display: inline-block;
                    @extend %font-body2;
                    color:$importColor;
                    padding-left: 8px;
                }
                &.score{
                    text-align: right;
                }
            }
            .name{
                @extend %font-caption;
            }
            .zm{
                @extend %font-caption;
                display: block;
                width: 49px;
                height: 21px;
                line-height: 21px;
                background: url(../images/bg_zhimafen@3x.png) no-repeat left center;
                background-size: 49px 21px;
                margin-top: 3px;
                text-align:left;
                padding-left:18px;
                color:$green;
            }
        }
        .no-more{
            @extend %font-caption;
            padding:10px;
            text-align: center;
        }
    }

</style>
